<template>
    <div>
        <Modal :title="modalTitle" v-model="modalShow" :width="modalWidth">
            <Alert>
                <Form :model="searchObj" inline>
                    <FormItem>
                        <Input v-model="searchObj.code" class="search-input" clearable placeholder="请输入编码"/>
                    </FormItem>
                    <!--<FormItem>
                        <Input v-model="searchObj.powers_type" class="search-input" clearable placeholder="请输入职权类型"/>
                    </FormItem>-->
                    <FormItem>
                        <Input v-model="searchObj.project_name" class="search-input" clearable placeholder="请输入职权名称中项目"/>
                    </FormItem>
                    <FormItem>
                        <Input v-model="searchObj.subitem" class="search-input" clearable placeholder="请输入职权名称中的子项"/>
                    </FormItem>
                    <FormItem>
                        <Input v-model="searchObj.action_subject" class="search-input" clearable placeholder="请输入决定机构"/>
                    </FormItem>
                    <FormItem>
                        <Button class="search-btn" type="primary" @click="searchAction">
                            <Icon type="ios-search"/>
                            搜索
                        </Button>
                    </FormItem>
                </Form>
            </Alert>
            <Row>
                <Table :loading="tableLoading" border max-height="600" :columns="tableColumns" :data="tableData"
                       size="small">
                    <template slot="name" slot-scope="{ row }">
                        <span v-if="row.project_name && row.subitem">{{row.project_name}} （ {{row.subitem}} ）</span>
                        <span v-if="row.project_name && !row.subitem">{{row.project_name}}</span>
                        <span v-if="!row.project_name && !row.subitem"> </span>
                    </template>
                    <template slot="action" slot-scope="{ row }">
                        <ButtonGroup>
                            <Button :disabled="row.select_type == 2" type="info" size="small" class="action-btn"
                                    @click="chooseAction(row)">选择
                            </Button>
                        </ButtonGroup>
                    </template>
                </Table>
                <!--<vxe-toolbar custom></vxe-toolbar>
                <vxe-table
                        border
                        resizable
                        :tooltip-config="{theme:'light',enterable:true}"
                        highlight-hover-row
                        height="500"
                        size="medium"
                        show-overflow="tooltip"
                        :loading="tableLoading"
                        align="center"
                        header-align="center"
                        :sort-config="{trigger: 'cell'}"
                        :data="tableData"
                        :checkbox-config="{checkField: 'checked'}">
                    <vxe-table-column type="seq" title="#" width="60"></vxe-table-column>
                    <vxe-table-column :field="item.key" :title="item.title" min-width="120"
                                      v-for="(item,index) in tableColumns" :key="index">
                    </vxe-table-column>
                    <vxe-table-column field="action" title="操作" min-width="150">
                        <template v-slot="{row}">
                            <ButtonGroup>
                                <Button type="info" size="small" class="action-btn"
                                        @click="chooseAction(row)">选择
                                </Button>
                            </ButtonGroup>
                        </template>
                    </vxe-table-column>
                </vxe-table>-->
            </Row>
            <br>
            <Row type="flex" justify="end">
                <Page show-sizer show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"
                      @on-change="getPageNo" :page-size-opts="[10,20,50,200]" @on-page-size-change="pageSizeChange"/>
            </Row>
            <div slot="footer">
                <Button type="text" @click="cancelOption">关闭</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
  getGovPowersList
} from '@/api/setting/base-info'
// import { formatDate } from '@/components/dateFormat'
export default {
  name: 'optionModal',
  props: {
    modalTitle: {
      type: String,
      default: () => {
        return ''
      }
    },
    modalType: {
      type: String,
      default: () => {
        return 'info'
      }
    },
    modalWidth: {
      type: Number,
      default: () => {
        return 1000
      }
    },
    dataObj: {
      type: Object,
      default: () => {
        return {}
      }
    },
    baseType: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      searchObj: {},
      modalShow: false,
      btnLoading: false,
      formItem: {},
      tableColumns: [
        {
          title: '序号',
          type: 'detail.vue',
          width: 70,
          align: 'center'
        },
        // {
        //   title: '表名',
        //   key: 'table_name',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // },
        {
          title: '编码',
          key: 'code',
          tooltip: true,
          width: 150,
          align: 'center'
        },
        {
          title: '职权类型',
          key: 'powers_type',
          tooltip: true,
          width: 150,
          align: 'center'
        },
        {
          title: '决定机构',
          key: 'action_subject',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '事项名称（子项名称）',
          slot: 'name',
          tooltip: true,
          width: 350,
          align: 'center'
        },
        // {
        //   title: '职权名称中的项目',
        //   key: 'project_name',
        //   tooltip: true,
        //   width: 280,
        //   align: 'center'
        // },
        // {
        //   title: '职权名称中的子项',
        //   key: 'subitem',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // },
        // {
        //   title: '职权依据',
        //   key: 'powers_basis',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // },
        {
          title: '事项责任',
          key: 'duty_matter',
          tooltip: true,
          width: 350,
          align: 'center'
        },
        // {
        //   title: '备注',
        //   key: 'remarks',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // },
        {
          title: '选择',
          slot: 'action',
          fixed: 'right',
          minWidth: 130,
          align: 'center'
        }
      ],
      tableData: [],
      selectData: [],
      tableLoading: false,
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      baseTypeNum: ''
    }
  },
  methods: {
    modelAction () {
      this.modalShow = !this.modalShow
    },
    cancelOption () {
      this.modalShow = false
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    },
    initPage () {
      this.pageObj.pageNo = 1
    },
    searchAction () {
      this.initPage()
      this.init()
    },
    init (data) {
      // console.log(this.baseType, 'baseType')
      const obj = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        // table_name: this.$common.xeUtils.trim(this.searchObj.table_name),
        code: this.$common.xeUtils.trim(this.searchObj.code),
        powers_type: this.$common.xeUtils.trim(this.searchObj.powers_type),
        project_name: this.$common.xeUtils.trim(this.searchObj.project_name),
        subitem: this.$common.xeUtils.trim(this.searchObj.subitem),
        action_subject: this.$common.xeUtils.trim(this.searchObj.action_subject),
        type: this.baseTypeNum
      }
      let param = data || obj
      // if (this.baseType !== '') {
      //   obj.type = this.baseType
      // }
      // console.log(obj)
      this.tableLoading = true
      getGovPowersList(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.pageObj.totalRecord = data.data.totalRecord
          this.tableLoading = false
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    chooseAction (row) {
      this.$emit('saveOption', row)
      this.modalShow = false
    }
  },
  mounted () {
    // this.init()
    // console.log(this.baseTypeNum, 'mounted-modal-baseType', typeof (this.baseTypeNum))
  },
  watch: {
    dataObj (val) {
      this.formItem = val
    },
    baseType (data) {
      this.baseTypeNum = data.toString()
      // console.log(this.baseTypeNum, 'modal-baseType', typeof (this.baseTypeNum))
    }
  },
  computed: {}
}
</script>

<style lang="less">
    /*单元格超出部分的tooltip(加scoped后会失效！！！)*/
    body /deep/ .vxe-table--tooltip-wrapper {
        z-index: 1100 !important;
    }
</style>
